<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>欢迎页面-X-admin2.0</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div class="x-body">
			<form class="layui-form" id="addForm">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">品牌:</label>
						<div class="layui-input-inline">
							<select name="brand" id="brand">
								<option value="">选择汽车品牌</option>
								<option>大众</option>
								<option>奔驰</option>
								<option>宝马</option>
								<option>别克</option>
								<option>红旗</option>
								<option>五菱</option>
								<option>特斯拉</option>
							</select>
						</div>
						<label class="layui-form-label">汽车类型:</label>
						<div class="layui-input-inline">
							<select name="type" id="type">
								<option value="">选择汽车类型</option>
								<option>轿车</option>
								<option>跑车</option>
								<option>商务车</option>
								<option>越野车</option>
								<option>电动车</option>
							</select>
						</div>
						<label class="layui-form-label">汽车颜色:</label>
						<div class="layui-input-inline">
							<select name="color" id="color">
								<option value="">选择汽车颜色</option>
								<option>红色</option>
								<option>白色</option>
								<option>黑色</option>
								<option>蓝色</option>
								<option>棕色</option>
								<option>其他</option>
							</select>
						</div>
						
					</div>
				</div>
				<div class="layui-form-item">
					<label for="1" class="layui-form-label">
						<span class="x-red">*</span>型号
					</label>
					<div class="layui-input-inline">
						<input type="text" id="model" name="model" autocomplete="off" class="layui-input">
					</div>
					<label for="seatNum" class="layui-form-label">座位数
					</label>
					<div class="layui-input-inline">
						<input type="text" id="seatNum" name="seatNum" autocomplete="off" class="layui-input">
					</div>
					
				</div>
				<div class="layui-form-item">
					<label for="usedTime" class="layui-form-label">
						车龄（年）
					</label>
					<div class="layui-input-inline">
						<input type="text" id="usedTime" name="usedTime" autocomplete="off" class="layui-input">
					</div>
					<label for="milage" class="layui-form-label">
						行驶里程（万里）
					</label>
					<div class="layui-input-inline">
						<input type="text" id="mileage" name="mileage" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">是否上架:</label>
						<div class="layui-input-inline">
							<select name="sale" id="sale">
								<option value="">选择是否上架</option>
								<option value="1">是</option>
								<option value="0">否</option>
							</select>
						</div>
						<label class="layui-form-label">交易类型:</label>
						<div class="layui-input-inline">
							<select name="saleType" id="saleType">
								<option value="">选择交易类型</option>
								<option value="0">寄售</option>
								<option value="1">求购</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label for="note" class="layui-form-label">
						<span class="x-red">*</span>备注(卖家手机号码)
					</label>
					<div class="layui-input-inline">
						<input type="text" id="note" name="note" autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label" style="color: #ff0000;font-size: 16px;">
						<span class="x-red">*</span>标价:
						</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="text" id="price" name="price" placeholder="￥" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">万</div>
					
					
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上传封面照片</label>
					<div class="layui-input-inline uploadHeadImage">
						<div class="layui-upload-drag" id="headImg">
							<i class="layui-icon"></i>
							<p>点击上传图片，或将图片拖拽到此处</p>
						</div>
					</div>
					预览图：
					<div class="layui-upload-list" id="demo2"></div>

					<input type="text" id="picture" name="picture" style="display: none;" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上传车况图1</label>
					<div class="layui-input-inline uploadHeadImage">
						<div class="layui-upload-drag" id="Img">
							<i class="layui-icon"></i>
							<p>点击上传图片，或将图片拖拽到此处</p>
						</div>
					</div>
					预览图：
					<div class="layui-upload-list" id="demo3"></div>
					<input type="text" id="picture1Path" name="picture1Path" style="display: none;" class="layui-input">
				</div>
				<div class="layui-form-item">	
						<label class="layui-form-label">上传车况图2</label>
					<div class="layui-input-inline uploadHeadImage">
						<div class="layui-upload-drag" id="Img2">
							<i class="layui-icon"></i>
							<p>点击上传图片，或将图片拖拽到此处</p>
						</div>
					</div>
					预览图：
					<div class="layui-upload-list" id="demo4"></div>
					<input type="text" id="picture2Path" name="picture2Path" style="display: none;" class="layui-input">
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" onclick="doSave();" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						<div id="rigisterHint" style="color:red"></div>
					</div>

				</div>

			</form>
		</div>
		<script>
			layui.use(['form', 'layer', 'upload'], function() {
				$ = layui.jquery;
				var form = layui.form,
					layer = layui.layer,
					upload = layui.upload,
					element = layui.element;
				var s = "";
				//拖拽上传
				var uploadInst = upload.render({
					elem: '#headImg',
					url: 'http://localhost:8888/usedcar/car/uploadImg?token='+document.cookie.split(";")[0],
					size: 1000,
					multiple: true,
					number: 7,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							// $('#demo1').attr('src', result); //图片链接（base64）
							$('#demo2').append('<img src="' + result +
								'" alt="' + file.name +
								'"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
						});
					},
					done: function(res) {
						var fileupload = $("#picture");
						fileupload.attr("value", res.data.src);
						console.log(fileupload.attr("value"));
						
						if (s == "") {
							s = JSON.stringify(res);
						} else {
							s = s + "," + JSON.stringify(res);
						};
						localStorage.setItem("address1", s);
					},
					error: function() {
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}

				});
				var uploadInst = upload.render({
					elem: '#Img',
					url: "http://localhost:8888/usedcar/car/uploadImg?token="+document.cookie.split(";")[0],
					size: 1000,
					multiple: true,
					number: 7,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							// $('#demo1').attr('src', result); //图片链接（base64）
							$('#demo3').append('<img src="' + result +
								'" alt="' + file.name +
								'"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
						});
					},
					done: function(res) {
						var fileupload2 = $("#picture1Path");
						fileupload2.attr("value", res.data.src);
						console.log(fileupload2.attr("value"));
						if (s == "") {
							s = JSON.stringify(res);
						} else {
							s = s + "," + JSON.stringify(res);
						};
						localStorage.setItem("address1", s);
					},
					error: function() {
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}

				});
				var uploadInst = upload.render({
					elem: '#Img2',
					url: "http://localhost:8888/usedcar/car/uploadImg?token="+document.cookie.split(";")[0],
					size: 1000,
					multiple: true,
					number: 7,
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo4').append('<img src="' + result +
								'" alt="' + file.name +
								'"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')
						});
					},
					done: function(res) {
						var fileupload2 = $("#picture2Path");
						fileupload2.attr("value", res.data.src);
						console.log(fileupload2.attr("value"));
						if (s == "") {
							s = JSON.stringify(res);
						} else {
							s = s + "," + JSON.stringify(res);
						};
						localStorage.setItem("address1", s);
					},
					error: function() {
						demoText.find('.demo-reload').on('click', function() {
							uploadInst.upload();
						});
					}
				
				});

				//自定义验证规则
				form.verify({
					repass: function(value) {
						if ($('#L_pass').val() != $('#L_repass').val()) {
							return '两次密码不一致';
						}
					}
				});

				//监听提交
				form.on('submit(add)', function(data) {
					console.log(data);
					//发异步，把数据提交给php
					layer.alert("增加成功", {
						icon: 6
					}, function() {
						// 获得frame索引
						var index = parent.layer.getFrameIndex(window.name);
						//关闭当前frame
						parent.layer.close(index);
					});
					return false;
				});


			});

			//提交表单
			function doSave() {
				
				var data = $("#addForm").serialize();
				$.post("http://localhost:8888/usedcar/car/add?token="+document.cookie.split(";")[0], data, function(response) {
					console.log(response);
					if (response.status == 200) {
						layer.alert("添加成功", {
							yes: function() {
								parent.layer.closeAll();
							}
						});
					} else if (response.status == 400) {
						//用户名不正确
						$("#rigisterHint").html("<b>车辆标价未输入</b>");
					} 
				});
			}
		</script>

	</body>

</html>
